<script>
import persistence from "@/store/persistence"
import { showModal, showToast, valIsEmpty } from "@/utils"
import numberUtils from "@/utils/numberUtils"
import popup from "@/components/popup/index.vue"
import shareInfo from "@/utils/shareInfo"
import urlUtils from "@/utils/urlUtils"
import popupPicker from "@/components/popupPicker/index.vue"
import request from "@/utils/request"
import settings from "@/utils/settings"

export default {
  name: "index",
  computed: {
    numberUtils() {
      return numberUtils
    },
  },
  components: {
    popup,
    popupPicker,
  },
  data() {
    return {
      hasReceivedResourceList: persistence.userReceiveResource.get() || [],
      resourceList: [],
      currentSelectResourceIndex: "",
      persistence,
      commodityId: "14",
      userSelectExam: persistence.userSelectExam.get(),
    }
  },
	created() {
		request({
			url: settings.nginxUrlSuffix + "pageConfig/receiveResource.json",
			method: "get",
			errorHandle: true,
			showLoading: true,
			noAuth: true,
			origin: true,
		}).then(({ data }) => {
			this.resourceList = data.withoutBindCommodity.resourceList
		})
	},
  methods: {
    showModal,
    // 免费领取点击事件
    freeReceiveBtnClick() {
      if (valIsEmpty(this.currentSelectResourceIndex)) {
        showToast.default("请选择资料")
        return
      }
      this.hasReceivedResourceList.push(this.currentSelectResourceIndex)
      persistence.userReceiveResource.add(this.currentSelectResourceIndex)
      this.receiveResource(this.resourceList[this.currentSelectResourceIndex])
    },
    // 领取资源
    receiveResource(item) {
      this.$refs.popup.addPopupItem("https://kou.gdzmtech.com/pic/a8da2f219476c607699c04c5cdef114.png", () => {
        wx.setClipboardData({
          data: item.cloudFileSharingInfo.link,
          success: () => {
            showToast.default("复制成功")
          },
        })
      })
    },
    resourceItemClick(item, index) {
      //还未领取过资料
      if (this.hasReceivedResourceList.length === 0) {
        this.currentSelectResourceIndex = index
        //领取过资料
      } else {
        //选中之前领取过的那个
        if (this.hasReceivedResourceList.includes(index)) {
          this.receiveResource(item)
          //弹出购买弹窗
        } else {
          this.showBuyingPopup()
        }
      }
    },
    //显示进群领资料弹窗
    showBuyingPopup() {
      this.$refs.popup.addPopupItem("https://kou.gdzmtech.com/pic/E9XMG7bjnwofjNfs5fg5.png")
    },
  },
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
      path: urlUtils.getCurrentPageUrl(),
      title: "点击免费领取资料",
      imageUrl: "https://kou.gdzmtech.com/pic/fJ8znpxPX4vNZZyfqF1U.png",
    })
  },
}
</script>

<template>
  <view class="page">
    <!--		还未领取之前-->
    <image
      class="title"
      src="https://kou.gdzmtech.com/pic/frkjLTwzh6wimGJfZRmB.png"
      v-if="hasReceivedResourceList.length === 0"
      mode="widthFix"
      :show-menu-by-longpress="true"
    ></image>
    <!--		领取了一个之后-->
    <image
      class="title"
      mode="widthFix"
      src="https://kou.gdzmtech.com/pic/20240521143531.png"
      v-else
      :show-menu-by-longpress="true"
    ></image>

    <view class="content">
<!--			:class="hasReceivedResourceList.length > 0 ? 'short' : 'long'"-->
      <view class="resource-list-container long">
        <view class="resource-list">
          <!--				还未解锁-->
          <view class="resource-item" v-for="(item, index) in resourceList" :key="index" @click="() => resourceItemClick(item, index)">
            <image class="file-icon" src="https://kou.gdzmtech.com/pic/66989386a3783975da5eef83c14ea35.png" mode="widthFix"></image>

            <view class="text-container">
              <view class="title">{{ item.title }}</view>
              <!--						未领取资料时展示-->
              <view class="description" v-if="hasReceivedResourceList.length === 0">点击免费领取该资料(限选)</view>
              <!--						已领取过的资料点击复制链接-->
              <view class="description" v-else-if="hasReceivedResourceList.includes(index)">点击复制链接至浏览器下载资料</view>
              <!--						已经领取过资料但未支付时资料锁住-->
              <view class="description" v-else>加群解锁全部资料</view>
            </view>

            <!--						未领取资料时展示-->
            <checkbox
              :checked="currentSelectResourceIndex === index"
              color="#FF3131"
              v-if="hasReceivedResourceList.length === 0"
            ></checkbox>
            <!--						已领取过的资料点击复制链接-->
            <view class="copy-link-btn" v-else-if="hasReceivedResourceList.includes(index)">点击复制链接</view>
            <!--						已经领取过资料但未支付时资料锁住-->
            <view class="lock-icon-container" v-else>
              <image class="lock-icon" src="https://kou.gdzmtech.com/pic/98fedf9f023148d33ed5b6b7af9ff62.png" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

<!--    <image-->
<!--      class="poster"-->
<!--      mode="widthFix"-->
<!--      src="https://kou.gdzmtech.com/pic/1188c767d4b18b807914dade53adb4b.png"-->
<!--      :show-menu-by-longpress="true"-->
<!--    ></image>-->

    <view class="footer-btn">
      <view class="btn" v-if="hasReceivedResourceList.length === 0" @click="freeReceiveBtnClick">立即领取</view>
      <template v-else>
        <view class="btn" @click="showBuyingPopup">加群解锁全部</view>
      </template>
      <!--      <view class="go-back-to-index btn" v-else @click="() => $uni.reLaunch({ url: '/pages/index/index' })">回到首页</view>-->
    </view>

    <popup ref="popup" :show-close="true" image-width="100vw"></popup>
    <!--		下单之前询问用户的考试-->
    <popupPicker
      title="请选择你的考试"
      ref="examSelectPicker"
      :picker-option-list="[
        { value: '四级', label: '四级' },
        { value: '六级', label: '六级' },
      ]"
      :show-confirm-btn="true"
      v-model="userSelectExam"
      @change="
        (item) => {
          persistence.userSelectExam.set(item.value)
        }
      "
      :required="true"
    ></popupPicker>
  </view>
</template>

<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  padding-bottom: 20vh;
  > .title {
    width: 100vw;
  }
  > .content {
    width: 100vw;
    //background: linear-gradient(180deg, #FEFEFE 0%, #e8faf0 100%);
    background: #fefefe;
    padding: {
      left: 20rpx;
      right: 20rpx;
      bottom: 30rpx;
    }
    .resource-list-container {
      padding: {
        top: 60rpx;
        left: 20rpx;
        right: 20rpx;
        bottom: 20rpx;
      }
      box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.3);
      border-radius: 20rpx;
      &.long {
        background: url("https://kou.gdzmtech.com/pic/ckY82PKRmtz6VymDs0r5.png") no-repeat;
        height: 934.52rpx;
        background-size: 100% 100%;
      }
      &.short {
        background: url("https://kou.gdzmtech.com/pic/f22VZqbkqRjpwJzzxDLB.png") no-repeat;
        height: 661.54rpx;
        background-size: 100% 100%;
      }
      .resource-list {
        overflow-y: auto;
        width: 100%;
        height: 100%;
        .resource-item {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 16rpx 0;
          border-bottom: 1px solid #e5e5e5;
          .file-icon {
            width: 60rpx;
            height: 85rpx;
          }
          .text-container {
            width: 0;
            flex: 1;
            margin-left: 20rpx;
            .title {
              font-weight: bold;
              font-size: 30rpx;
            }
            .description {
              margin-top: 4rpx;
              font-size: 24rpx;
              color: #545454;
            }
          }
          .lock-icon-container {
            padding-right: 30rpx;
            .lock-icon {
              width: 40rpx;
            }
          }
          .copy-link-btn {
            color: #3a7ef7;
            border: 1px solid #3a7ef7;
            padding: 10rpx 20rpx;
            border-radius: 29rpx;
            font-size: 26rpx;
          }
        }
      }
    }
    .ad-banner-container {
      margin: {
        top: 30rpx;
        left: 30rpx;
        right: 30rpx;
      }
      .ad-banner {
        width: 100%;
      }
    }
  }
  > .poster {
    width: 100vw;
  }
  > .footer-btn {
    position: fixed;
    bottom: calc(50rpx + env(safe-area-inset-bottom));
    left: 0;
    width: 100vw;
    .btn {
      margin: 0 auto;
      padding: 24rpx 100rpx;
      width: max-content;
      border-radius: 48rpx;
      color: var(--text-color-white);
      background: linear-gradient(90deg, #ff3131 0%, #ff914d 100%);
      font-size: 36rpx;
      &.go-back-to-index {
        margin-top: 20rpx;
        background: var(--theme-color);
      }
      &.small {
        padding: 20rpx 60rpx;
        font-size: 28rpx;
      }
    }
  }
}
</style>
